<template>
	<view id="app">
		<view id="top">
			<text>失物招领</text>
			<text id="addText" @click="toReleaseLostFound">+</text>
		</view>
		
		<!-- 失物招领列表-->
		<view class="main" v-for="(item,index) in lostList" :key="item.id" @click="goDetail(item.id)">
			<view class="msgHeader">
				<view class="msgHeaderR">
					<view class="">
						<image :src="item.avatarurl" mode=""></image>
					</view>
					<text>{{item.username}}</text>
				</view>
				<view class="msgHeaderL">
					<text>{{item.date}}</text>
					<text>{{item.time}}</text>
				</view>
			</view>
			<view class="msgBody">
				<view>
					<text>{{item.last_found_title}}</text>
				</view>
				<view>
					<text>{{item.last_found_withtitle}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lostList:[]
			}
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url: `/pages/lostProperty/lostFoundInDetail/lostFoundInDetail?id=${id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toReleaseLostFound(){
				uni.navigateTo({
					url: '/pages/lostProperty/releaseLostFound/releaseLostFound',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			/* 获取失物招领信息 */
			async getLostList(){
				const {data:res} =await this.$http({
					url:'/lastfound/findAllLastFound'
				});
				console.log(res);
				if(res.code!=200) return
				this.lostList=res.data
			}
		},
		mounted() {
			this.getLostList();
		}
	}
</script>

<style lang="less">
	#app {
		padding: 20rpx 30rpx 0rpx 30rpx;

		>view {
			margin-bottom: 30rpx;
		}
		#top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;
		
			>text {
				font-size: 42rpx;
			}
		}
	}

	.main {

		.msgHeader {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;

			>.msgHeaderR {
				display: flex;

				image {
					height: 80rpx;
					width: 80rpx;
					border-radius: 50%;
				}

				text {
					transform: translateX(20rpx);
					font-size: 30rpx;
				}
			}

			>.msgHeaderL {

				>text:nth-child(1) {
					margin-right: 20rpx;
				}
				
				>text{
					color: #b4b3b3;
					font-size: 20rpx;
				}
			}
		}

		.msgBody {
			padding-bottom: 15rpx;
			border-bottom: 1px solid #ebebeb;
			margin-left: 100rpx;
			
			>view {
				margin: 15rpx 0;
			}
			
			>view:nth-child(1){
				font-size: 30rpx;
			}
			
			>view:nth-child(2){
				color: #717171;
				font-size: 25rpx;
			}
		}
	}
</style>
